import React from 'react';
import { List, Radio, Flex, WhiteSpace, Button, TextareaItem, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import Container from '../components/Base/Container';

const RadioItem = Radio.RadioItem;
const ListItem = List.Item;

class Test extends React.Component {
  state = {
    value: 0,
    text: '',
  };

  componentWillMount(){
    window.scrollTo(0,0);
  }

  onChange = (value) => {
    this.setState({
      value,
    });
  };

  submit = () => {
    // this.props.history.goBack();
    this.props.complete(this.state.value, this.state.text);
  };

  renderDesc() {
    if (this.state.value === 1) {
      return (<ListItem>
        <TextareaItem
          rows={5}
          count={100}
          placeholder="输入原因..."
          value={this.state.text}
          onChange={(text) => {
            this.setState({
              text,
            });
          }}
        />
      </ListItem>);
    } else {
      return (
        <ListItem>
          <div>
            <Button inline size="small" style={{ marginRight: 6 }} onClick={() => { this.setState({ text: '未打通' }); }}>未打通</Button>
            <Button inline size="small" style={{ marginRight: 6 }} onClick={() => { this.setState({ text: '不方便接听' }); }}>不方便接听</Button>
            <Button inline size="small" onClick={() => { this.setState({ text: '其它原因' }); }}>其它原因</Button>
          </div>
          <TextareaItem
            rows={5}
            count={100}
            placeholder="输入原因..."
            value={this.state.text}
            onChange={(text) => {
              this.setState({
                text,
              });
            }}
          />
        </ListItem>
      );
    }
  }

  render() {
    const { value } = this.state;
    const data = [
      { value: 1, label: '完成回访，处理完毕' },
      { value: 2, label: '未完成，继续跟进' },
    ];
    return (
      <Container title="回访结果">
        <WhiteSpace size="lg" />
        <List>
          {data.map(i => (
            <RadioItem
              key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}
            >
              {i.label}
            </RadioItem>
          ))}
          {this.renderDesc()}
        </List>

        <WhiteSpace size="lg" />
        <WingBlank><Button type="primary" onClick={this.submit} disabled={!this.state.value}>提交</Button></WingBlank>
      </Container>
    );
  }
}
export default connect(null, (dispatch, props) => {
  return {
    complete(completeType, reason = '') {
      const { taskType, subType, cardNo, way } = props.location.query;
      dispatch({
        type: 'task/complete',
        payload: { taskType, subType, cardNo, completeType, reason, way },
      });
    },
  };
})(createForm()(Test));
